<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <button class="btn1">发送get</button>
    <button class="btn2">发送delete</button>
    <button class="btn3">发送post</button>
    <button class="btn4">发送put请求</button>
    <script>
        /* 
        axios 请求别名 分2类： 参数区别
            1 、 2个参数的别名请求 ：  axios.别名(url,{配置项});
            2、  3个参数的别名请求 ：  axios.别名(url,{data},{配置项})
        
        
        
        */
    //    一、发送get请求
        let btn1 = document.querySelector(".btn1");
        btn1.onclick = async function () {
            // axios({配置项})
            // let { data } = await axios({
            //     url: "/getdata",
            //     method: "get",
            //     params:{
            //         a:1,
            //         b:2
            //     }
            // })
            // console.log(data);

            // 通过get别名发送请求
            // axios.get(url,{配置项})
            let {data} =  await  axios.get("/getdata",{
                params:{
                    x:1,
                    y:2
                },
                timeout:2000 // 配置超时时间为2s
            })
            console.log(data);
        }


        // 二、发送一个post请求
        // 是3个参数 ： axios.post(url,{data},{config});

        document.querySelector(".btn3").onclick = async function(){
            let {data} = await axios.post("/getpostdata",{a:10,b:20},{timeout:2000});
            console.log(data);
        }

        // 三、发送一个delete请求 和get类似 也是2个参数
        // axios.delete(url,{配置项});
        document.querySelector(".btn2").onclick =async function(){
            let {data} = await  axios.delete("/deletedata",{params:{x:10,y:20}});
            console.log(data);
        }

        // 四、发送一个put请求  和 post类似 也是 3个参数
        // axios.put(url,{data},{配置项});

        document.querySelector(".btn4").onclick = async function(){
            let {data} = await axios.put("/putdata",{a:11,b:12});
            console.log(data);
        }


        /* 
        发送axios请求 2种方式 
        一、通用方式  axios({配置项})
        二、别名
            1.两个参数   axios.get(url,{配置})
                        axios.delete(url,{配置})
            3.三个参数  axios.put(url,{data},{配置})
                        axios.post(url,{data},{配置})
        */



    </script>
</body>

</html>